<template>
  <div class="home-work">
    <nav-bar class="nav-bar-position" background="none">作品中心</nav-bar>

    <nav>
      <ul>
        <li
          v-for="(v, i) in navList"
          :key="i"
          :class="cur === i ? 'active' : ''"
          @tap="change(i)"
        >
          {{ v.label }}
        </li>
      </ul>
    </nav>

    <div class="work" v-if="list.length>0">
      <ul>
        <li v-for="(v, i) in list" :key="i"  @tap="to(v.id)">
          <div class="header">
            <div class="name">
              {{ v.l_name }}
            </div>
            <div class="date">
              {{ v.submit_time }}
            </div>
          </div>

          <div class="footer">
            <div class="title">
              {{ v.c_name }}
            </div>

            <div class="btn" :class="v.comment_status === 1 ? 'y' : 'w'">
              {{ v.comment_status === 0 ? "待点评" : v.comment_status === 1 ? '未批改' : "已批改" }}
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="no-work" v-else>
      <div class="no-work-img">
        <MyImg src="ft2/pic_nodata@2x.png" />
      </div>

      <p>目前没有批改作业</p>
    </div>

    <TabBar :cur="2" class="tab-bar-position" />
    <white-space :height="50" />
  </div>
</template>

<script>
  import TabBar from "../../component/tab-bar/tab-bar";
  import { ajax } from "../../utils/ajax";
  import { mapState } from 'vuex'

  export default {
  name: "homework",
  data() {
    return {
      cur: 0,
      navList: [
        { label: "全部", type: 1 },
        { label: "未批改", type: 2 },
        { label: "已批改", type: 3 }
      ],
      list: []
    };
  },
  components: { TabBar },
  computed: mapState("User", ["token"]),
  onShow() {

  },
    onLoad(){
      this.change(0);
    },
  methods: {
    change(i) {
      this.cur = i;
      this.ajaxGet(i + 1);
    },

    async ajaxGet(type) {
      const { token } = this;
        const res = await ajax({
          method: "GET",
          url: "/api/user/work/list",
          data: {
            token,
            type,
            page:1,
            page_size:1000
          }
        });
      console.log(res);
      if (!res) {
          return  this.list = []
        }
        if (res.code === 1) {
          this.list = res.data.list
        }
    },
    to(id){
      uni.navigateTo({
        url:'/page_commit/commit/commit?id='+id
      })
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../uni";

.home-work {
  .no-work {
    width: upx(300);
    height: upx(148);
    margin: upx(300) auto;
    text-align: center;

    &-img {
      width: upx(240);
      height: upx(148);
      margin: auto;
    }

    p {
      margin-top: upx(40);
      @include ft(36);
    }
  }

  nav {
    position: sticky;
    width: 100vw;
    top: 0;
    height: upx(300);
    background: linear-gradient(
      -90deg,
      rgba(9, 182, 188, 1) 0%,
      rgba(0, 224, 180, 1) 100%
    );
    box-shadow: 0 4px 16px 0 rgba(8, 186, 187, 0.5);

    ul {
      display: flex;
      align-content: center;
      justify-content: space-around;
      width: upx(580);
      height: upx(80);
      position: absolute;
      bottom: upx(24);
      left: 0;
      right: 0;
      border-radius: upx(40);
      border: upx(4) solid rgba(255, 255, 255, 1);
      margin: auto;
      @include ft(36, #fff);
      overflow: hidden;

      li {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        &:nth-child(1):after,
        &:nth-child(2):after {
          position: absolute;
          content: "|";
          font-size: upx(20);
          right: upx(-2);
        }

        &.active {
          background: white;
          color: $theme-green;
        }
      }
    }
  }

  .work {
    padding: upx(40);

    ul {
      li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: upx(670);
        height: upx(200);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 36px 0 rgba(122, 137, 130, 0.14);
        border-radius: 32px 32px 0 32px;
        padding: upx(36) upx(28);
        box-sizing: border-box;
        margin-bottom: upx(36);

        .header {
          display: flex;
          justify-content: space-between;

          .name {
            @include ft(36);
          }

          .date {
            @include ft(28, #9096a3);
          }
        }

        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title {
            @include ft(32, #5d6473);
          }

          .btn {
            width: upx(160);
            height: upx(56);
            line-height: upx(56);
            background: linear-gradient(
              136deg,
              rgba(255, 211, 34, 1) 0%,
              rgba(255, 186, 0, 1) 100%
            );
            border-radius: upx(35);
            text-align: center;
            @include ft(35);
            font-family: PingFangSC-Medium, PingFang SC, serif;
            color: rgba(255, 255, 255, 1);
            border: upx(4) solid rgba(255, 204, 24, 1);

            &.w {
              color: $theme-yellow;
              background: white;
            }
          }
        }
      }
    }
  }
}
</style>
